<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 400px;height:200px;border: solid 1px black;margin: 30px auto;position: relative;}
        .box p{height:30px;margin: 0;background: blue;width: 0;line-height: 30px;text-align: center;color: #fff;position: absolute;top:85px;}
        .alertBox{display: none;background: rgba(200,200,200,0.5);position: fixed;left:0;top:0;right:0;bottom:0;}
        .alertBox .alert{width:200px;height:200px;background-color: #fff;margin: 40px;}
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>

    <div class="alertBox">
        <div class="alert">
            这是一个提示框
        </div>
    </div>
</body>
<script>
    const obox = document.querySelector(".box")
    const op = document.querySelector(".box p")

    const alertBox = document.querySelector(".alertBox")

    // 步长
    const speed = 3;
    // 目标
    const target = 400;
    // 计时器
    let t;

    document.onclick = function(){
        clearInterval(t);
        t = setInterval(()=>{
            // 判断剩下距离是否足够一步
            if(target - op.offsetWidth < speed){
                // 不够一步，停止计时器
                clearInterval(t);
                // 强行设置到目标位置
                op.style.width = target + "px";
                op.innerHTML = "100%";

                alertBox.style.display = "block"
            }else{
                // 足够一步，正常累加步长
                op.style.width = op.offsetWidth + speed + "px";
                // 计算百分比
                op.innerHTML = parseInt((op.offsetWidth / target) * 100) + "%";
            }
        }, 30);
    }
</script>
</html>